<div class="table">
    <base href="<?php echo base_url() ?>" />

    <table id="records" class="registeredRecord">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>

    
    <!-- delete confirmation dialog box -->
    <div id="delConfDialog" title="Confirm">
        <p>Are you sure?</p>
    </div>
    <!-- message dialog box -->
    <div id="msgDialog"><p></p></div>

</div>

<script type="text/template" id="readTemplate" class="registeredTemplate">
        <tr id="${agent_id}">
                <td align="center" width="30px">${nomor}</td>
                <td style="text-align:left;">${scan_date}</td>
                <td style="text-align:left;">${data_timestamp}</td>
                <td style="text-align:left;">${custom_scan_in_id}</td>
                <td style="text-align:left;">${getNikName}</td>
                
                <td align= "center" width="110px">
                    <a class="" href="<?=base_url().'index.php/scan_history/topdf/' . '${scan_in_id}'?>">PDF</a> | 
                    <a class="" href="<?=base_url().'index.php/scan_history/getDetail/' . '${scan_in_id}'?>">Detail</a>     
                </td>
        </tr>
</script>

<script type="text/javascript">

function closeBack()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}

function closeItem()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}


$(document).keypress(function(e){
    if(e.keyCode==27){
        $("#darkBack").fadeOut("slow"); 
        $("#popUpItem").fadeOut("slow");   
    }
});

jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }

var readUrl   = 'index.php/guarantee/read',
    /**
 * updateUrlRegistered = 'index.php/master/agents/update',    
 *     viewUrlNew    = 'index.php/act_agents/view',
 *     delUrlRegistered    = 'index.php/act_agents/delete/primer',
 */
    delHref,
    updateHref,
    updateId;

$(document).ready( function() {
    
    readAgentsRegistered();
    
    $( '#msgDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'Ok': function() {
                $( this ).dialog( 'close' );
            }
        }
    });
    
    $( '#delConfDialog' ).dialog({
        autoOpen: false,
        buttons: {
            'No': function() {
                $( this ).dialog( 'close' );
            },
            'Yes': function() {
                //display ajax loader animation here...
                $( '.regisAni' ).fadeIn( 'slow' );
                $( this ).dialog( 'close' );
                $.ajax({
                    url: delHref,
                    success: function( response ) {
                        //hide ajax loader animation here...
                        $( '.regisAni' ).fadeOut( 'slow' );
                        
                        $( '#msgDialog > p' ).html( response );
                        $( '#msgDialog' ).dialog( 'option', 'title', 'Success' ).dialog( 'open' );
                        
                        $( 'a[href=' + delHref + ']' ).parents( 'tr' )
                        .fadeOut( 'slow', function() {
                            $( this ).remove();
                        });
                        
                    } //end success
                });
            } //end Yes
        } //end buttons
    }); //end dialog
    
    
    /*$( '.registeredRecord' ).delegate( 'a.deleteBtn', 'click', function() {
        delHref = $( this ).attr( 'href' );
        $( '#delConfDialog' ).dialog( 'open' );
            return false;
    });*/ //end delete delegate
    // --- Create Record with Validation ---
    
}); //end document ready


// function readAgentsRegistered() {
//     //display ajax loader animation
//  $( '.regisAni' ).fadeIn( 'slow' );
    
//     $.ajax({
//         url: readUrlRegistered,
//         dataType: 'json',
//         success: function( response ) {
            
//          var j=1;
//             for( var i in response ) {
//                 response[ i ].updateLink = updateUrlRegistered + '/' + response[ i ].agent_id;
//                 response[ i ].deleteLink = delUrlRegistered + '/' + response[ i ].agent_id;
//                 response[ i ].viewLink = viewUrlNew + '/' + response[ i ].agent_id;
//                 response[ i ].nomor = j;
//              response[ i ].file_name = ( isValid( response[ i ].lat, response[ i ].lon ) == 1 ) ? 'ok.png' : 'cancel.png';
                
//                 j++;
//             }
            
            
//             //clear old rows
//             $( '.registeredRecord > tbody' ).html( '' );
            
//             //append new rows
//             $( '.registeredTemplate' ).render( response ).appendTo( ".registeredRecord > tbody" );
            
            
//          //apply dataTable to #records table and save its object in dataTable variable
//             if( typeof dataTableRegistered == 'undefined' )
//          {
//                 dataTableRegistered = $( '.registeredRecord' ).dataTable({
//                  "bJQueryUI": true
//              });
//          }
            
//             //hide ajax loader animation here...
//             $( '.regisAni' ).fadeOut( 'slow' );
//         }
//     });
    
// }// end readUsers

function readAgentsRegistered() {
    $('.registeredRecord').dataTable({
                "bJQueryUI": true, // aktifkan tampilan tabel JQueryUI
                "sAjaxSource": readUrl, //data source
                "sAjaxDataProp": "aaData", //variabel yg menampung data table
                "bServerSide": true, //serverside processing true
                "bProcessing": true, // tampilkan 'processing...' status saat data dipanggil
                //"sPaginationType": 'fullNumbers',
                "bPaginate": true,
                "aoColumns":[ //tentukan kolom pd tabel yg akan menampung value dari server
                    {"mDataProp": "claim_id", "sTitle": "Claim ID"}, 
                    {"mDataProp": "claim_date", "sTitle": "Claim Date"}, 
                    {"mDataProp": "user_name", "sTitle": "Sales Name"},
                    {"mDataProp": "channel_name", "sTitle": "Channel"},
                    {"mDataProp": "frontliner_name", "sTitle": "Frontliner"}

                    
                ],
                "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) 
                {
                    // $(nRow).find('td').eq(-1).after('<a href="'+approveUrlNew+'/'+aaData[0]+'">Approve</a> |  <a href="'+updateUrlNew+'/'+aaData[0]+'">Edit</a> | <a href="'+delUrlNew+'/'+aaData[0]+'">Delete</a>'); //buat link action 
                    $(nRow).find('td').eq(0).before('<td>'+(parseInt(iDisplayIndex,10)+1+parseInt(dis))+'</td>'); //20120719 ayu // nomor baris
                    $(nRow).find('td').eq(-1).after('<a href="index.php/guarantee/detail/'+aaData[0]+'">Detail</a>'); //buat link action 

                    return nRow;
                }, //20120719 ayu
                
                "fnServerData": function ( sSource, aoData, fnCallback ) { 
                    $.getJSON( sSource, aoData, function (json) { 
                                
                    dis=json['iDisplayStart'];
                    fnCallback(json);
                });}  
    });
    $('.registeredRecord thead tr').find('th').eq(0).before('<th class="ui-state-default">No</th>'); //20120719 ayu
    $('.registeredRecord thead tr').find('th').eq(-1).after('<th class="ui-state-default" width="200px">Action</th>');
}


</script>